<template>
	<view>
		<view class="hm-header-xian"></view>
		<view class="hm-p-20 hm-bg-f">
			<u--form labelPosition="left" :rules="rules" :model="formData" ref="form">
				<u-form-item label="联系人" prop="name" labelWidth="80" borderBottom>
					<u--input v-model="formData.name" type="text" placeholder="请输入联系人姓名" color="#999"
						border="none" clearable></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="gender" labelWidth="80" @click="genderShow = true" borderBottom>
					<u--input v-model="genderText" type="number" placeholder="请选择性别" disabledColor="#fff" color="#999"
						border="none" disabled></u--input>
						<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" labelWidth="80" borderBottom>
					<u--input v-model="formData.phone" type="number" placeholder="请输入联系电话" color="#999"
						border="none" clearable></u--input>
				</u-form-item>
				<u-form-item label="所在位置" prop="lat_lng" labelWidth="80" borderBottom @click="chooseLocation">
					<u--input v-model="formData.lat_lng" type="text"
						color="#999" disabled disabledColor="#fff" border="none" placeholder="请选择所在位置"></u--input>
					<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="详细地址" prop="address" labelWidth="80" ref="item1">
					<u--input v-model="formData.address" type="text" placeholder="请输入街道小区门牌号" color="#999"
						border="none" clearable></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<view class="hm-footer-fixed">
			<view class="hm-w-b100 hm-p-lr-b25">
				<u-button @click="subForm" type="success" :disabled="disabled" :loading="disabled" text="提交"></u-button>
			</view>
		</view>
		<u-action-sheet :show="genderShow" :actions="gender" title="请选择性别" @close="genderShow = false"
			@select="selectGender">
		</u-action-sheet>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet: {},
				formData: {
					id:0,
					name: '',
					gender: '',
					phone: '',
					lat_lng: '',
					address: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入联系人姓名',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'number',
						required: true,
						len: 11,
						message: '请输入正确的联系电话',
						trigger: ['blur', 'change']
					},
					lat_lng: {
						type: 'string',
						required: true,
						message: '请选择所在位置',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请输入街道小区门牌号',
						trigger: ['blur', 'change']
					},
					gender: {
						type: 'number',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
				},
				genderShow: false,
				genderText:'',
				gender: [
					{
						name: '先生',
						value:1
					},
					{
						name: '女士',
						value:2
					},
				],
				disabled: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.formData.id = options.id;
			_this.applet = uni.getStorageSync('applet');
			_this.getDetail();
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			let _this = this;
			_this.$refs.form.setRules(_this.rules)
		},
		props: {},
		methods: {
			/**
			 * 获取当前地址信息
			 */
			getDetail: function() {
				let _this = this;
				App._get('user.address/edit', {
					id: _this.formData.id
				}, function(result) {
					_this.formData.name = result.data.name;
					_this.formData.gender = result.data.gender.value;
					_this.genderText = result.data.gender.text;
					_this.formData.phone = result.data.phone;
					_this.formData.lat_lng = result.data.lat_lng;
					_this.formData.address = result.data.address;
				});
			},

			selectGender(e) {
				let _this = this;
				_this.formData.gender = e.value;
				_this.genderText = e.name;
			},
			/**
			 * 获取所在地区
			 */
			chooseLocation: function() {
				let _this = this,
					location = '';
				uni.chooseLocation({
					success: function(res) {
						_this.formData.lat_lng = res.latitude + ',' + res.longitude;
					}
				});
			},
			
			/**
			 * 表单提交
			 */
			subForm: function() {
				let _this = this;
				_this.$refs.form.validate().then(res => {
					_this.disabled = true; // 按钮禁用
					// 提交到后端
					App._post_form('user.address/edit', _this.formData, function(result) {
						App.showSuccess(result.msg, function() {
							uni.navigateBack();
						});
					}, false, function() {
						_this.disabled = false; // 解除禁用
					});
				}).catch(errors => {})
			}
		}
	};
</script>
<style>
	
</style>
